<template>
  <treeselect v-model="location" :options="locationList" :normalizer="normalizer" placeholder="选择位置" />
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import { listLocations } from "@/api/vadmin/basic/locations/locations";

export default {
  name: "ChooseLocation",
  components: { Treeselect },
  props: {
    rqParam: {
      type: Number,
      defalut: 0
    }
  },
  data() {
    return {
      location: null,
      locationList: []
    };
  },
  watch: {
    location(newVal, oldVal) {
      // 当 location 的值发生变化时执行一些操作
      this.$emit("commitLocationMethod", newVal);
    },
    rqParam(newVal, oldVal) {
      // 当 location 的值发生变化时执行一些操作
      this.location = newVal;
    }
  },
  created() {
  },
  mounted() {
    this.location = this.rqParam;
    listLocations({ pageNum: 1, pageSize: 10000 }).then(response => {
      this.locationList = this.handleTree(response.data.results, "id", "parent_id");
    });
  },
  methods: {
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      };
    }
  }
};
</script>
<style>
</style>
